<template>
    <div>
<van-nav-bar
  title="我的订单"
  left-text="返回"
  left-arrow
  @click-left="()=>{
    $router.back('/')
  }"
/>
  <van-skeleton :row="7" :loading="!ispd"/>
<div v-if="ispd">
<van-tabs v-model:active="active" @change="onChange">
  <van-tab title="全部"></van-tab>
  <van-tab title="待支付"></van-tab>
  <van-tab title="已支付"></van-tab>
</van-tabs>
<div v-for="key in newdata">
 <p>我的订单号：{{ key.orderId }}</p>
<p>订单生成时间：{{key.create_time }}</p>
<p>订单描述：{{ key.product_code }}</p>
<p>订单价格：{{ key.totalPrice/100 }}</p> 
<p>订单支付：{{ key.status==0?'待支付':'已支付' }}</p>    
</div>
</div>
    </div>
</template>

<script setup>
import { ref } from "vue";
let mydata=ref([])
let newdata=ref([])
import { getOrderListApi } from "@/api/api";
getOrderListApi(localStorage.getItem('username')).then(res=>{
    console.log('my',res);
    mydata.value=res.data.data
    newdata.value= mydata.value
})
const onChange=(index)=>{
    if(index==0){
        console.log(0);
        newdata.value= mydata.value
    }
    if(index==1){
        console.log(1);
        newdata.value= mydata.value.filter(i=>i.status==0)
    }
     if(index==2){
        console.log(2);
        newdata.value= mydata.value.filter(i=>i.status>=1)
    }
}
 let ispd=ref(false)
    setTimeout(()=>{
        ispd.value=true
    },1500)
</script>

<style lang="scss" scoped>

</style>